<template>
	<view class="">
		<!-- 微信员工添加-->
		<uni-popup class="wechatUserPopup" ref="wechatUserPopup" background-color="#f5f6f6" :mask-click="false">
			<view class="popup-content">
				<view class="unisection" background-color="#007AFF" title="sss" subTitle="eee"
					style="margin-bottom: 3px;">
					<view class="box-bg">
						<uni-nav-bar>
							<block slot="left">
								<view class="city" @click="backUserPopup">
									<uni-icons type="arrowleft" color="#666" size="18" />
									<view>
										<text class="uni-nav-bar-text">返回</text>
									</view>
								</view>
							</block>
							<view class="input-view">
								<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
								<input confirm-type="search" class="nav-bar-input" type="text" placeholder="员工搜索"
									@confirm="confirm" />
							</view>
							<block slot="right">
								<view class="city" @click="searchFn">
									搜索
								</view>
							</block>
						</uni-nav-bar>
					</view>
					<uni-list class="unilist">
						<uni-list-item clickable @click="staffWechatLogFn(item,index)" :class="{ischeck:index==current}"
							v-for="(item,index) in staffList" :title="item.nick_name" :note="item.wx_alias" showArrow
							:thumb="item.head_img" thumb-size="lg" rightText="" />
					</uni-list>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import dictionary from '@/utils/dictionary.js';
	import sun from '@/utils/sun.js';


	export default {
		name: "ykrecord",
		components: {},
		data() {
			return {
				staffList: [],
				info: {

				},
				current: 999
			};
		},

		beforeMount() {
			this.dictionary = dictionary;
		},
		watch: {

		},
		onLoad(options) {

		},
		onReachBottom() {


		},
		methods: {
			showUserPop(friendInfo) {
				this.info = friendInfo
				this.$refs.wechatUserPopup.open('center');
				this.getUserid(this.info.wechat_id);
				this.current = 999
			},
			searchFn() {

			},
			//拿到员工id
			getUserid(friend_id) {
				let _this = this;
				let url = '/api/customer.member/memberWechatList';
				let params = {
					friend_id: friend_id,
				};
				sun.request({
					url: url,
					token: true,
					data: params,
					success(res) {
						if (res.code == 200) {
							let data = res.data;
							_this.staffList = data.staff;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			},
			//员工聊天页面
			staffWechatLogFn(row, index) {
				console.log(row)
				let wxId = row.wx_id
				this.current = index;
				uni.navigateTo({
					url: '/pages/customer/ykRecord/ykRecord?friendId=' + this.info.wechat_id + '&wxId=' + wxId
				});
			},
			backUserPopup() {
				this.$refs.wechatUserPopup.close();
			},
		}
	};
</script>

<style lang="less" scoped>
	// 修改导航栏下边框颜色 --全局配置请添加至app.vue
	/deep/.uni-navbar--border {
		border-bottom-color: #fff !important;
	}

	/deep/.uni-navbar__header-btns-right {
		// 修改右侧文字颜色
		.uni-nav-bar-right-text {
			color: #F0B83D !important;
			font-size: 14px;
		}

		// 修改标题文字颜色
		.uni-nav-bar-text {
			font-size: 16px;
			color: rgba(26, 26, 26, 1);
			font-weight: bold;
		}
	}

	.ischeck {
		background: #f3f3f3;
	}

	.unilist {
		position: relative;
		height: calc(100vh - 30px);
		overflow: auto;
	}

	.box-bg {
		background-color: #F5F5F5;
	}

	.city {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		background-color: #f8f8f8;
		height: 30px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 5px 0;
		line-height: 30px;
		flex: 1;
		background: #ffffff;
		border: 0.5px solid #eeeeee;
		border-radius: 5px;
		padding-left: 1rem;
		box-sizing: border-box;
	}

	/deep/.uni-navbar__header-btns-right {
		justify-content: center
	}
</style>
